<template>
    <div>
        <div class="main-container">
            <div class="login-container">
                <el-form ref="form" :model="user" :rules="rules"
                         v-loading.fullscreen.lock="loading"
                         element-loading-text="正在登陆..."
                         element-loading-spinner="el-icon-loading"
                         element-loading-background="rgba(0, 0, 0, 0.8)">
                    <div style="text-align: center"><img src="@/assets/logo.png" style="width: 60%;height: 60%"></div>
                    <h3 class="title">欢迎登陆</h3>
                    <el-form-item prop="userName">
                        <el-input v-model="user.userName" placeholder="用户名" prefix-icon="el-icon-user"
                                  size="medium"></el-input>
                    </el-form-item>
                    <el-form-item prop="passWord">
                        <el-input v-model="user.passWord" placeholder="密码" type="password" prefix-icon="el-icon-key"
                                  size="medium"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"
                                   style="width: 100%"
                                   size="medium"
                                   @click="onSubmit">
                            登陆
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="img-container">
                <el-carousel height="70vh">
                    <el-carousel-item v-for="item in imgList" :key="item">
                        <img :src="item" alt="" style="height: 100%;width:100%">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<script>
import {getUserInfo} from "@/api/login";

export default {
    name: "Login",
    data() {
        return {
            imgList: [require("@/assets/img/login/loginOne.png"), require("@/assets/img/login/loginTow.png"), require("@/assets/img/login/loginThree.png"), require("@/assets/img/login/loginFour.png")],
            user: {
                userName: "admin",
                passWord: "123"
            },
            userList: [
                {"userName": "admin", "passWord": "123"},
                {"userName": "supper", "passWord": "321"}
            ],
            loading: false,
            rules: {
                userName: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                ],
                passWord: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ]
            }
        }
    },
    methods: {
        onSubmit() {
            let that = this;
            that.loading = true;
            that.$refs.form.validate((valid) => {
                    if (valid) {
                        getUserInfo(that.user).then(res => {
                            that.loading = false;
                            if (res) {
                                window.sessionStorage.setItem("token", `Bearer ${res.data.token}`);
                                window.sessionStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
                                that.$router.replace("/welcome");
                            }
                        }, error => {
                            console.log(error)
                            that.loading = false;
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                }
            );
        }
    },
}
</script>

<style scoped>
.main-container {
    width: 70vw;
    height: 70vh;
    border: black 1px solid;
    position: absolute;
    z-index: 1;
    left: 15vw;
    top: 15vh;
    border-radius: 10px;
    background-clip: padding-box;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}

.login-container {
    width: 25vw;
    position: absolute;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 0px 0px 10px;
    background-color: aliceblue;
}

.img-container {
    width: 45vw;
    position: absolute;
    height: 100%;
    right: 0px;
}

.img-container img {
    border-radius: 0px 10px 10px 0px;
}

.title {
    font-size: 26px;
    text-align: center;
    color: #888888;
}
</style>